<template>
    <div>
        <el-card class="!border-none mt-4" shadow="never">
            <div>
                <el-button class="mb-4" type="primary" @click="back()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    备份
                </el-button>
            </div>
            <el-table :data="tableData" border style="width: 880px">
                <el-table-column
                    prop="fileName"
                    label="数据库备份名"
                    width="400"
                />
                <el-table-column prop="fileSize" label="大小" width="180">
                    <template #default="scope">
                        {{ autoTransformationBytes(scope.row.fileSize) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="300">
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="handleReduction(scope.row.fileName)"
                            >还原备份</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.row.fileName)"
                            >删除备份</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

import {
    getBakSqlFile,
    delBakSqlFile,
    reductionBakSqlFile,
    bakBakSqlFile,
} from "@/api/cloudupdate";
import { autoTransformationBytes } from "@/utils/util";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";

const size = ref("");
const blockMargin = computed(() => {
    const marginMap = {
        large: "32px",
        default: "28px",
        small: "24px",
    };
    return {
        marginTop: marginMap[size.value] || marginMap.default,
    };
});
interface dbfileInterface {
    fileName: string;
    fileSize: string;
}
const tableData = ref<dbfileInterface[]>();
onMounted(async () => {
    getBakSqlFileFn();
});
const getBakSqlFileFn = async () => {
    await getBakSqlFile({})
        .then((res) => {
            tableData.value = res;
        })
        .catch((ret) => {});
    nextTick(() => {
        // handleExpand()
    });
};
const handleReduction = (fileName: string) => {
    ElMessageBox.confirm("确认还原数据库？", "还原数据库", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        // if you want to disable its autofocus
        // autofocus: false,
    })
        .then(() => {
            const loading = ElLoading.service({
                lock: true,
                text: "还原中...",
                background: "rgba(0, 0, 0, 0.7)",
            });
            reductionBakSqlFile({ app: "adminapi", fileName: fileName })
                .then((res) => {
                    loading.close();
                    ElMessage({
                        message: "还原成功",
                        type: "success",
                    });
                })
                .catch((ret) => {
                    loading.close();
                });
            console.log("__", fileName);
        })
        .catch(() => {});
};
const handleDelete = (fileName: string) => {
    ElMessageBox.confirm("确认删除数据库？", "删除数据库", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        // if you want to disable its autofocus
        // autofocus: false,
    })
        .then(() => {
            delBakSqlFile({ fileName: fileName })
                .then((res) => {
                    if (res.res) {
                        ElMessage({
                            message: "删除成功",
                            type: "success",
                        });
                        getBakSqlFileFn();
                    } else {
                        ElMessage.error("删除失败");
                    }
                })
                .catch((ret) => {});
        })
        .catch(() => {});
};
const back = async () => {
    ElMessageBox.confirm("确认备份数据库？", "删除数据库", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            const loadingInstance = ElLoading.service({
                lock: true,
                text: "备份中...",
                background: "rgba(0, 0, 0, 0.7)",
            });
            bakBakSqlFile({})
                .then((res) => {
                    loadingInstance.close();
                    if (res.res) {
                        ElMessage({
                            message: "备份成功",
                            type: "success",
                        });
                        getBakSqlFileFn();
                    } else {
                        ElMessage.error("备份失败");
                    }
                })
                .catch((ret) => {
                    loadingInstance.close();
                });
        })
        .catch(() => {});
};
</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}
</style>
